<script setup>
import {reactive,ref} from "vue";
import request from '@/api/request'
import {useRouter} from "vue-router"
import { Search } from '@element-plus/icons-vue'
let router = useRouter();
const rules = reactive({

})

let Supplier_prices=ref({supplierpricesVendorid:"全部"})
let supplier_pricess=ref([])
let formRef=ref()
let chanpin=ref([])

let isVisible=ref(false)
let title=ref("")
let page=ref({
    current:1,
    size:10,
    total:0,
    records:[]
})

let data=ref({})

let vendor=ref({})

let toRemove=()=>{
    request({
        //查询客户
        url:"supplierPrices",
        method:"delete",
        data:supplier_pricess.value
    }).then(res=>{
        location();
    })
}
//修改
let toUpdate=async(row)=>{
    title.value="修改"
    isVisible.value=true;
    if(row != undefined){
        data.value=row;
    }else{
        data.value=supplier_pricess.value[0];
    }
    
    router.push("/procurement/SupplierPrices/update");
}

let refTanle=()=>{
    isVisible.value=false;
    location();
}
//重置
let shuaxin=()=>{
    formRef.value.resetFields();
}
//新增
let toInsert=()=>{
    title.value="添加供应商价格";
    isVisible.value=true;
    router.push("/procurement/SupplierPrices/insert");
}

//选择框事件
let fuxuankuang=(a)=>{
    supplier_pricess.value= a
}

let location=()=>{
    request({
        //查询供应商
        url:"/vendor",
        method:"get",
        data:{
            current:1,
            size:1000
        }
        
    }).then(res=>{
        vendor.value=res.data.records;
    })
    request({
        //查询客户
        url:"/supplierPrices",
        method:"get",
        params:{
            current:page.value.current,
            size:page.value.size,
            ...Supplier_prices.value
    }
    }).then(res=>{
        page.value=res.data
    })
    request({
        url: '/material/index',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size
        }
    }).then(res => {
        chanpin.value=res.data.records
    })
}
let chaxungys=()=>{
    request({
        //查询客户
        url:"/vendor/All",
        method:"get"
    }).then(res=>{
        vendor.value=res.data
    })
}
chaxungys();
location();
</script>

<template>
    <div>
        <el-card>
            <template #header>
                <el-form ref="formRef" inline :model="Supplier_prices" style="display: flex;justify-content: start;" class="card_wrap">
                    <el-form-item label="供应商价格编码" prop="supplierPricesId" class="c_item">
                        <el-input v-model="Supplier_prices.supplierPricesId" class="sousuo" placeholder="请输入编码"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商" prop="supplierpricesVendorid" class="c_item">
                        <el-select class="sousuo"v-model="Supplier_prices.supplierpricesVendorid" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in vendor" :label="item.vendorName" :value="item.vendorId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品" prop="supplierpricesProductsid" class="c_item">
                        <el-select class="sousuo"v-model="Supplier_prices.supplierpricesProductsid" @change="location">
                            <el-option label="全部" value="全部">
                                </el-option>
                            <el-option v-for="item in chanpin" :label="item.materialName" :value="item.materialId">
                                </el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item  class="c_item">
                        <template #default>
                             <el-button type="primary" @click="location">搜索</el-button>
                            <el-button type="info" :plain=true @click="shuaxin">重置</el-button><p></p>
                        </template>
                    </el-form-item>
                </el-form>

                <div style="margin: 20px 0px;">
                    <el-button @click="toInsert" type="primary" :plain="true">+添加</el-button>
                    <el-button type="success" :plain=true @click="toUpdate(undefined)" style="border:0px" :disabled="supplier_pricess.length!=1">修改</el-button>
                    <el-button type="danger" :plain=true @click="toRemove" style="border:0px" :disabled="!supplier_pricess.length">删除</el-button>
                </div>

                <el-table :data="page.records" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"  @selection-change="fuxuankuang" :border="true" show-overflow-tooltip>
                    <el-table-column type="selection" width="55"/>
                    
                    <el-table-column prop="supplierPricesid" label="供应商价格编码" width="130px;" />
                    <el-table-column prop="supplierpricesVendorid" label="供应商编码" width="100px;"/>
                    <el-table-column prop="supplierpricesProductsid" label="产品编码" width="110px;"/>
                    <el-table-column prop="supplierpricesStandardunitprice" label="标准采购单价" width="110px;" />
                    <el-table-column prop="supplierpricesPurchaseunitprice" label="采购单价（含税）" width="140px;"/>
                    <el-table-column prop="supplierpricesDiscountrate" label="折扣率" width="80px;"/>
                    <el-table-column prop="supplierpricesVatrate" label="增值税率" width="100px;"/>
                    <el-table-column prop="supplierpricesNopurchaseunitprice" label="采购单价（不含税）" width="155px;"/>
                    <el-table-column prop="supplierpricesTax" label="税额" width="80px;"/>
                    <el-table-column prop="supplierpricesSubmissiontime" label="提交时间" width="110px;"/>
                    <el-table-column prop="supplierpricesUpdated" label="更新时间" width="110px;"/>
                    <el-table-column #default="scope" label="操作" fixed="right">
                        <el-button type="primary" @click="toUpdate(scope.row)" :row="scope.row">修改</el-button>
                    </el-table-column>
                </el-table>

                <el-pagination @current-change="location" v-model:currentPage="page.current"
                    :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                </el-pagination>

                <el-dialog
                    :title="title"
                    v-model="isVisible"
                    :destroy-on-close="true"
                    width="60%">
                    <router-view @ref-table="refTanle" :data="data">
                    </router-view>
                </el-dialog>
            </template>
            
        </el-card>
       
    </div>
</template>

<style scoped>
.sousuo{
    width:200px;
    /* margin-right: 100px; */
}
.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.c_item{
    flex:1;
    margin:0px 5px 15px 0;
    width: calc((100%-10px)/3); 
    min-width:calc((100% - 10px)/3);
    max-width:calc((100% - 10px)/3);
    &:nth-child(3n){
        margin-right:0;
    }
}
:deep(.el-tooltip):hover{
    cursor: pointer;
}
</style>